<template>
  <div class="company">
    <van-search
      v-model="search"
      placeholder="请输入关键字"
      shape="round"
      input-align="center"
      class="myInput"
    >
      <template #left>
        <div class="company">公司</div>
      </template>
    </van-search>
    <div class="banner">
      <img src="@/assets/img_banner.png" alt="" />
    </div>
    <div class="filter">
      <div class="recommend">
        <span>推荐</span>
        <span @click="distanceUp"
          >距离<img v-if="distance === 0" src="@/assets/v0.png" />
          <img v-else-if="distance === 1" src="@/assets/v1.png" />
          <img v-else src="@/assets/v2.png" />
        </span>
        <span @click="scoreUp"
          >评分<img v-if="score === 0" src="@/assets/v0.png"/>
          <img v-else-if="score === 1" src="@/assets/v1.png"/>
          <img v-else src="@/assets/v2.png"
        /></span>
      </div>

      <van-dropdown-menu class="oneLIne">
        <van-dropdown-item title="筛选" ref="item">
          <van-cell title="包邮">
            <template #right-icon>
              <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
          <van-cell center title="团购">
            <template #right-icon>
              <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
          <div style="padding: 5px 16px;">
            <van-button type="danger" block round @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <div class="mainbox">
      <ul class="items">
        <li class="item">
          <div class="logo">
            <img src="@/assets/logo.png" alt="" />
          </div>
          <div class="content">
            <div class="titleBox">
              <div class="left">
                <h4>蓝云erp</h4>
                <span>昌平区 1km</span>
              </div>
              <div class="right">
                <span>5.0分</span>
              </div>
            </div>
            <ul>
              <li>医疗健康</li>
              <li>B轮</li>
              <li>100-499</li>
            </ul>
            <span class="onfind"
              >在招职位: <b>50</b>
              <span style="margin:0 5px;color:#B4B4BD;fontSize:12px">/</span
              >最后更新时间:2020.05.03</span
            >
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'company',
  data () {
    return {
      search: '',
      value: 0,
      switch1: false,
      switch2: false,
      distance: 0, // 距离
      score: 0, // 评分
      option: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ]
    }
  },
  methods: {
    onConfirm () {
      this.$refs.item.toggle()
    },
    distanceUp () {
      this.distance++
      if (this.distance > 2) {
        this.distance = 0
      }
    },
    scoreUp () {
      this.score++
      if (this.score > 2) {
        this.score = 0
      }
    }
  }
}
</script>

<style lang="less" scoped>
.company {
  // 输入框
  .myInput {
    padding-top: 2px;
    .company {
      margin-right: 20px;
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: bold;
      color: #222222;
    }
    .van-search__content {
      background-color: #f7f4f5;
      text-align: center;
      input {
        width: 100%;
        color: #b3b3b3;
      }
    }
  }
  // banner图
  .banner {
    padding: 0 15px;
    height: 127px;
    img {
      height: 100%;
    }
  }

  // 筛选条
  .filter {
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    .recommend span:first-child {
      margin-right: 40px;
    }
    .recommend {
      span {
        line-height: 48px;
        margin-right: 30px;
        color: #181a39;
        img {
          height: 15px;
          vertical-align: middle;
        }
      }
    }
    /deep/ .van-dropdown-menu__bar {
      .van-ellipsis {
        font-size: 12px;
      }
      box-shadow: none;
    }
  }
  // 主体
  .mainbox {
    padding-left: 15px;
    padding-right: 18px;
    .items {
      .item {
        display: flex;
        justify-content: space-between;
        padding-bottom: 22px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Semibold;
        border-bottom: 1px solid #f7f4f5;
        .logo {
          margin-right: 16px;
          img {
            width: 65px;
            height: 65px;
          }
        }
        .content {
          flex: 1;
          span {
            color: #545671;
          }
          .titleBox {
            display: flex;
            justify-content: space-between;
            .left {
              h4 {
                margin: 0;
                font-size: 18px;
                color: #19232b;
              }
              span {
                display: block;
                margin: 5px 0 12px;
              }
            }
            .right {
              margin-top: 5px;
            }
          }
          ul {
            display: flex;
            margin-bottom: 15px;
            li {
              padding: 1px 6px;
              margin-right: 7px;
              background-color: #f7f4f5;
              color: #b4b4bd;
              border-radius: 3px;
            }
          }
          .onfind {
            color: #b4b4bd;
            b {
              color: #00b8d4;
            }
          }
        }
      }
    }
  }
}
</style>
